<!DOCTYPE html>
<html lang="en" class="app" xmlns:th="http://www.thymeleaf.org">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body class="">



            <section class="scrollable wrapper-lg" id="ajaxContent" th:fragment="videoDatail">
              <style>
                .pagination{
                    margin: 0;
                }
              </style>
              <script type="text/javascript" src="/bootstrapPage/video-detail-page.js"></script>
              <script th:inline="javascript">
                $("#jplayer_1").jPlayer({
                  ready: function () {
                    $(this).jPlayer("setMedia", [[${MvMusic}]]);
                  },
                  swfPath: "js",
                  supplied: "m4v",
                  size: {
                    width: "100%",
                    height: "auto",
                    cssClass: "jp-video-360p"
                  },
                  globalVolume: true,
                  smoothPlayBar: true,
                  keyEnabled: true
                });

                //用于分页初始化
                function searchDeclareTemp(param){
                  $.ajax({
                    type:"POST",
                    data:{
                      video_id:param
                    },
                    url:"/user/ajax/videoComment",
                    success: function (data) {
                      $(".fei-video").html(data);
                      CommentPageInit();
                    },
                    error: function () {

                    }
                  });
                  // initSpiritPagination(30,6,5);
                }

                function CommentPageInit(){
                  $.ajax({
                    type: 'POST',
                    url:"/user/ajax/videoCommentPageInit",
                    success: function (data) {
                      initSpiritPagination(data.total,data.pages,data.pageSize);
                    }
                  });
                }

                //初始化分页
                searchDeclareTemp([[${videoBean.id}]]);
              </script>

              <div class="row">
                <div class="col-sm-8">
                  <div class="panel">
                    <!-- video player -->
                    <div id="jp_container_1">
                      <div class="jp-type-single pos-rlt">
                        <div id="jplayer_1" class="jp-jplayer jp-video"></div>
                        <div class="jp-gui">
                          <div class="jp-video-play">
                            <a class="fa fa-5x text-white fa-play-circle"></a>
                          </div>
                          <div class="jp-interface bg-info padder">
                            <div class="jp-controls">
                              <div>
                                <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                                <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                              </div>
                              <div class="jp-progress">
                                <div class="jp-seek-bar dker">
                                  <div class="jp-play-bar dk">
                                  </div>
                                  <div class="jp-title text-lt">
                                    <ul>
                                      <li></li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                              <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                              <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                              <div class="hidden-xs hidden-sm">
                                <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                                <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                              </div>
                              <div class="hidden-xs hidden-sm jp-volume">
                                <div class="jp-volume-bar dk">
                                  <div class="jp-volume-bar-value lter"></div>
                                </div>
                              </div>
                              <div>
                                <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                                <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="jp-no-solution hide">
                          <span>Update Required</span>
                          To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                        </div>
                      </div>
                    </div>
                    <!-- / video player -->
                    <div class="wrapper-lg">
                      <h2 class="m-t-none text-black">[[${videoBean.video_name}]]</h2>
<!--                      简介部分-->
<!--                      <div class="post-sum">-->
<!--                        <p>-->
<!--&lt;!&ndash;                          <br><br>&ndash;&gt;-->
<!--                          </p>-->
<!--                      </div>-->
                      <div class="line b-b"></div>
                      <div class="text-muted">
                        <i class="fa fa-user icon-muted"></i> by <a href="#" class="m-r-sm">[[${videoBean.singerBean.name}]]</a>
                        <i class="fa fa-clock-o icon-muted"></i> [[${#strings.substring(videoBean.release_time,0,10)}]]
                        <a href="#" class="m-l-sm"><i class="fa fa-comment-o icon-muted"></i> <span class="fei-comment">[[${countComment}]]</span> comments</a>
                      </div>
                    </div>
                  </div>
                  <h4 class="m-t-lg m-b"><span class="fei-comment">[[${countComment}]]</span> Comments</h4>


<!--                  评论-->
                  <div class="fei-video"></div>

<!--                  分页插件-->
                  <div class="spiritPagination"></div>

                  <h4 class="m-t-lg m-b">Leave a comment</h4>
                  <form >

<!--                    用于接收id-->
                    <div class="form-group" style="display: none">
                      <input class="form-control" name="id" th:value="${videoBean.id}" ></input>
                    </div>
                    <div class="form-group">
                      <label>Comment</label>
                      <textarea id="commentTextarea" class="form-control" rows="5" name="text" placeholder="Type your comment"></textarea>
                    </div>
                    <div class="form-group">
                      <button type="button" id="form-button" class="btn btn-success">Submit comment</button>
                    </div>
                  </form>

                </div>
                <div class="col-sm-4">
                  <div class="panel panel-default">
                    <div class="panel-heading">Suggestions</div>
                    <div class="panel-body">
                      <article class="media" th:each="videoBean:${videoBeanList}">
                        <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])" class="pull-left thumb-lg m-t-xs">
                          <img th:src="@{${videoBean.img}}">
                        </a>
                        <div class="media-body">                        
                          <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])" class="font-semibold">[[${videoBean.video_name}]]</a>
                          <div class="text-xs block m-t-xs"><a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/videoDetail?id='+[[${videoBean.id}]])">[[${videoBean.singerBean.name}]]</a></div>
                        </div>
                      </article>
                    </div>
                  </div>
                </div>
              </div>
            </section>


</body>

</html>